<script setup>
	import {
		getCarouselsListApi
	} from '@/apis/carousels.js'
	import ConfigBox from './components/ConfigBox.vue'
	import {
		route
	} from 'uview-plus'
	import {
		ref
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useCartStore
	} from '@/store'
	const cartStore = useCartStore()
	// 轮播图片
	const carouselsList = ref([])
	const getCarouselsList = async () => {
		const res = await getCarouselsListApi()
		carouselsList.value = res.data.data.list
	}
	getCarouselsList()
	// 点击轮播图跳转
	const upSwiperClick = (item) => {
		uni.navigateTo({
			url: item.redirectUrl
		});
	}

	const gridList = ref(
		[{
				icon: '/static/images/home-supermarket.png',
				title: '小明超市'
			},
			{
				icon: '/static/images/home-costume.png',
				title: '小明服饰'
			},
			{
				icon: '/static/images/home-global.png',
				title: '全球购'
			},
			{
				icon: '/static/images/home-fresh.png',
				title: '小明生鲜'
			},
			{
				icon: '/static/images/home-gohome.png',
				title: '小明到家'
			},
			{
				icon: '/static/images/home-topup.png',
				title: '充值缴费'
			},
			{
				icon: '/static/images/home-pin.png',
				title: '9.9元拼'
			},
			{
				icon: '/static/images/home-claimtickets.png',
				title: '领劵'
			},
			{
				icon: '/static/images/home-savemoney.png',
				title: '省钱'
			},
			{
				icon: '/static/images/home-all.png',
				title: '全部'
			}
		]);

	const token = ref("")
	
	onShow(() => {
		token.value = uni.getStorageSync('token')
		console.log(token.value);
		if (token.value) {
			cartStore.getCount()
		}
	})


	// 头部右侧
	const rightClick = () => {
		if (token.value) {
			route({
				url: '/pages/user/index',
				type: 'tab'
			})
		} else {
			route({
				url: '/pages/user/login',
				type: 'to'
			})
		}
	}
	
	// 去搜索
	const toSearch = ()=>{
		console.log(111);
		route('/pages/goods/search')
	}
	
</script>
<template>
	<view class="page">
		<!-- 导航栏 -->
		<view class="nav-box">
			<up-navbar :placeholder="true" :height="50" bgColor="#52ABAD" @rightClick="rightClick" :autoBack="true">
				<!-- 
				
				<template #center>
				
				</template>
				
				-->
				<template #left>
					<up-icon name="list" color="#fff" size="30"></up-icon>
				</template>
				<template #center>
					<up-search  @click="toSearch" :disabled="true"
						class="search-box" placeholder="搜索" :showAction="false"></up-search>
				</template>

				<template #right>
					<up-icon v-if="token" name="account" color="#fff" size="30"></up-icon>
					<up-text v-else text="登录"></up-text>
				</template>

			</up-navbar>
		</view>
		<!-- 轮播图 -->
		<view class="swiper">
			<up-swiper imgMode="aspectFit" @click="upSwiperClick" :list="carouselsList" keyName="carouselUrl" indicator
				indicatorMode="dot" circular :radius="0" :height="160"></up-swiper>
		</view>

		<!-- 宫格 -->
		<!-- 
    <up-grid :col="5" class="grid-box" gap="20rpx">
      <up-grid-item class="item" v-for="(item, index) in gridList" :key="index">
        <up-image :src="item.icon" width="60rpx" height="60rpx"></up-image>
        <up-text :text="item.title" align="center"></up-text>
      </up-grid-item>
    </up-grid> -->

		<!-- 新品 -->
		<view class="news-goods">
			<ConfigBox :title="`新品推荐`" :type="3"></ConfigBox>
		</view>

		<!-- 热门商品 -->
		<view class="hot-sale">
			<ConfigBox :title="`热门商品`" :type="4"></ConfigBox>
		</view>

		<!-- 最新推荐 -->
		<view class="recommended">
			<ConfigBox :title="`最新推荐`" :type="5"></ConfigBox>
		</view>


	</view>

</template>



<style lang="scss" scoped>
	.nav-box {
		.search-box {
			padding: 0 3rem;
		}
	}

	.swiper {
		padding-top: 10rpx;
	}

	.grid-box {
		padding: 1rem;

		.item {
			text-align: center;
		}
	}
</style>